<template>
  <div class="container">
    <el-button type="primary" @click="goToHome" class="return-button">返回主界面</el-button>
    <div class="collapse-container">
      <el-collapse v-model="activeNames" class="custom-collapse">
        <el-collapse-item
            v-for="record in history"
            :key="record.test_id"
            :name="record.test_id"
            :title="record.date"
            class="el-collapse-item"
        >
          <el-descriptions title="个人信息" border column="2">
            <el-descriptions-item label="年龄">{{ record.age }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ translateGender(record.gender) }}</el-descriptions-item>
            <el-descriptions-item label="胆固醇">{{ translateCholesterol(record.cholesterol) }}</el-descriptions-item>
            <el-descriptions-item label="葡萄糖">{{ translateGlucose(record.gluc) }}</el-descriptions-item>
            <el-descriptions-item label="BMI指数">{{ record.bmi }}</el-descriptions-item>
            <el-descriptions-item label="是否吸烟">{{ translateBoolean(record.smoke) }}</el-descriptions-item>
            <el-descriptions-item label="收缩压">{{ record.ap_hi }}</el-descriptions-item>
            <el-descriptions-item label="是否饮酒">{{ (translateBoolean(record.alco)) }}</el-descriptions-item>
            <el-descriptions-item label="舒张压">{{ record.ap_lo }}</el-descriptions-item>
            <el-descriptions-item label="是否活跃">{{ translateBoolean(record.active) }}</el-descriptions-item>
            <el-descriptions-item label="预测时间">{{ record.date }}</el-descriptions-item>
            <el-descriptions-item label="预测结果">{{ record.result }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-pagination
        @current-change="fetchHistory"
        :current-page="currentPage"
        :page-size="10"
        layout="prev, pager, next"
        :total="total"
    />
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { useRouter } from "vue-router";
import { onMounted, ref } from 'vue';
import axios from 'axios';

export default {
  name: 'History',
  setup() {
    const store = useStore();
    const username = ref(localStorage.getItem('username')); // 从localStorage中获取用户名
    const history = ref([]);
    const total = ref(0);
    const currentPage = ref(1);
    const activeNames = ref([]);
    const router = useRouter();

    const fetchHistory = async (page = 1) => {
      try {
        console.log("Fetching history for username:", username.value);
        const response = await axios.get('http://localhost:5000/api/history', {
          withCredentials: true,
          params: { username: username.value, page: page, per_page: 10 }
        });
        console.log("Response data:", response.data);
        history.value = response.data.history;
        total.value = response.data.total;
        currentPage.value = response.data.current_page;
      } catch (error) {
        console.error('Error fetching history:', error);
      }
    };

    const translateGender = (gender) => {
      return gender === 1 ? '男性' : '女性';
    };

    const translateCholesterol = (cholesterol) => {
      switch (cholesterol) {
        case 1: return '正常';
        case 2: return '略高于正常';
        case 3: return '远高于正常';
        default: return '未知';
      }
    };

    const translateGlucose = (gluc) => {
      switch (gluc) {
        case 1: return '正常';
        case 2: return '略高于正常';
        case 3: return '远高于正常';
        default: return '未知';
      }
    };

    const translateBoolean = (value) => {
      return value === 1 ? '是' : '否';
    };

    onMounted(() => {
      fetchHistory();
    });

    const goToHome = async () => {
      try {
        console.log('username', username);
        await router.push('/predict');
      } catch (error) {
        console.error('back error', error);
      }
    };

    return {
      history,
      total,
      currentPage,
      fetchHistory,
      activeNames,
      goToHome,
      translateGender,
      translateCholesterol,
      translateGlucose,
      translateBoolean
    };
  }
};
</script>

<style scoped>
.container {
  background-color: #dcecf5;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.collapse-container {
  width: 66.67%;
  margin-top: 50px;
}

.return-button {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.custom-collapse .el-collapse-item__header {
  background-color: #e6f7ff;
  transition: background-color 0.3s ease;
}

.custom-collapse .el-collapse-item__header:hover,
.custom-collapse .el-collapse-item__header.is-active {
  background-color: #bcdfff;
}

.custom-collapse .el-collapse-item__wrap {
  background-color: #e6f7ff;
}

</style>
